<template>
  <div class="elec-safety-left">
    <div class="data-scan">
      <moduleLeft title="数据概览">
        <div class="circle">
          <img src="@/assets/image/img1.png" />
        </div>
        <div class="content">
          <div class="col1">
            <div class="item">
              <span>{{ userCount2 }}</span>
            </div>
            <div class="text">
              <div class="yellow-tb"></div>
              <span>民用户数(户)</span>
              <div class="yellow-bb"></div>
            </div>
          </div>
          <div class="col2">
            <div class="col3">
              <div class="item">
                <span>{{ userCount1 }}</span>
              </div>
              <div class="text">
                <div class="blue-tb"></div>
                <span>重点用户(户)</span>
                <div class="blue-bb"></div>
              </div>
            </div>
            <div class="col4">
              <div class="item">
                <span>{{ userTotal }}</span>
              </div>
              <div class="text">
                <div class="blue-tb"></div>
                <span>总用户数(户)</span>
                <div class="blue-bb"></div>
              </div>
            </div>
          </div>
          <div class="col1">
            <div class="item">
              <span>{{ userCount3 }}</span>
            </div>
            <div class="text">
              <div class="yellow-tb"></div>
              <span>商业用户(户)</span>
              <div class="yellow-bb"></div>
            </div>
          </div>
        </div>
      </moduleLeft>
    </div>
    <div class="user-info">
      <!-- v-show="userParams.total > userParams.pageSize" -->
      <div
        class="more"
        v-show="userParams.list.length > userParams.pageSize"
        @click="onMoreUserInfo"
      >
        更多
      </div>
      <moduleLeft title="用户信息">
        <div class="content">
          <el-table
            :data="userParams.list"
            height="22.2vh"
            border
            class="table"
            ref="userTablleRef"
            @mouseenter.native="autoScroll('userinfo', true)"
            @mouseleave.native="autoScroll('userinfo', false)"
          >
            <el-table-column
              prop="userName"
              label="姓名"
              align="center"
              width="65"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <!-- prop="userType" -->
            <el-table-column
              label="用户身份"
              align="center"
              width="75"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
              普通居民用户
            </el-table-column>
            <el-table-column
              prop="userPhone"
              label="联系电话"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            ></el-table-column>
            <el-table-column
              prop="community"
              label="所在地区"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            ></el-table-column>
            <!-- <el-table-column
              prop="alarmTypeShowName"
              label="单位名称"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            ></el-table-column>
            <el-table-column
              prop="userAddr"
              label="地址"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            ></el-table-column>
            <el-table-column
              prop="alarmTypeShowName"
              label="设备数"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            ></el-table-column> -->
            <el-table-column label="操作" align="center" width="48">
              <template slot-scope="scope">
                <span
                  class="operate-text"
                  @click="onDeatil(scope.row, 'userinfo')"
                  >详情</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </moduleLeft>
    </div>
    <div class="alarm-info">
      <moduleLeft title="报警信息">
        <div class="content">
          <el-table
            :data="alarmParams.list"
            :height="
              alarmParams.total > alarmParams.pageSize ? '20vh' : '22.2vh'
            "
            border
            class="table"
            ref="alarmTablleRef"
            @mouseenter.native="autoScroll('alarminfo', true)"
            @mouseleave.native="autoScroll('alarminfo', false)"
          >
            <el-table-column
              prop="address"
              label="地址"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="userType"
              label="用户身份"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              label="类别"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
              <template slot-scope="scope">
                <span :style="scope.row.alarmTypeShowName == '温度' ? 'color: #043DE8': scope.row.alarmTypeShowName == '过压' ? 'color: #E8D904':''">{{ scope.row.alarmTypeShowName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span class="operate-text" @click="onDeatil(scope.row, 'elec')"
                  >详情</span
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="alarmParams.total > alarmParams.pageSize"
            :total="alarmParams.total"
            :page.sync="alarmParams.currentPage"
            :limit.sync="alarmParams.pageSize"
            @pagination="getElecTableData"
            :layout="'prev, pager, next'"
          />
        </div>
      </moduleLeft>
    </div>
  </div>
</template>

<script>
import { powerPageQuery, aa } from "@/api/index";
import axios from "axios";
export default {
  name: "elecSafetyLeft",
  data() {
    return {
      // 用户列表查询参数
      userParams: {
        pageSize: 15,
        currentPage: 1,
        list: [],
        total: 0,
      },
      // 报警信息查询参数
      alarmParams: {
        pageSize: 11,
        currentPage: 1,
        list: [],
        total: 0,
      },
      userCount1: 156, //重点用户
      userCount2: 165, //民用用户
      userCount3: 8, //商业用户
      userTotal: 173, //总用户数（民用+商业)
      scrollTimer1: null,
      scrollTimer2: null,
      isShowPop1: false,
      isShowPop2: false,
    };
  },
  mounted() {
    this.initData();
  },
  beforeDestroy() {
    this.autoScroll("alarminfo", true);
    this.autoScroll("userinfo", true);
  },
  methods: {
    initData() {
      this.getElecTableData();
      this.getPersonInfo();
      // this.initPersonTypeCount();
    },
    onDeatil(row, type) {
      type == "userinfo"
        ? (this.isShowPop1 = true)
        : type == "elec"
        ? (this.isShowPop2 = true)
        : "";
      this.$emit("openElecPopup", row, type);
    },
    // 获取电力预警表格信息
    getElecTableData() {
      powerPageQuery(this.alarmParams).then((res) => {
        this.alarmParams.list = res.data ?? [];
        this.alarmParams.total = res.totals;
        this.autoScroll("alarminfo");
      });
    },
    // 分页pageSize变化
    handleSizeChange(val) {
      this.alarmParams.pageSize = val;
      this.getElecTableData();
    },
    // 分页pageNum变化
    handleCurrentChange(val) {
      this.alarmParams.currentPage = val;
      this.getElecTableData();
    },
    // 用户类型数目统计
    initPersonTypeCount() {
      aa({}).then((res) => {
        console.log(res);
      });
    },
    // 设置自动滚动
    autoScroll(tableType, stop) {
      if (tableType == "userinfo") {
        const table = this.$refs.userTablleRef;
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper;
        if (stop) {
          window.clearInterval(this.scrollTimer1);
        } else {
          if (!this.isShowPop1) {
            this.scrollTimer1 = window.setInterval(() => {
              divData.scrollTop += 1;
              if (
                divData.clientHeight + divData.scrollTop ==
                divData.scrollHeight
              ) {
                divData.scrollTop = 0;
              }
            }, 150); //滚动速度
          }
        }
      }
      if (tableType == "alarminfo") {
        const table = this.$refs.alarmTablleRef;
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper;
        if (stop) {
          window.clearInterval(this.scrollTimer2);
        } else {
          if (!this.isShowPop2) {
            this.scrollTimer2 = window.setInterval(() => {
              divData.scrollTop += 1;
              if (
                divData.clientHeight + divData.scrollTop ==
                divData.scrollHeight
              ) {
                divData.scrollTop = 0;
              }
            }, 150); //滚动速度
          }
        }
      }
    },
    // 人员类型综合信息
    getPersonInfo() {
      axios
        .get("/hanfeng-large-screen/json/electricity_user_list.json")
        .then((res) => {
          if (res.errcode == 0) {
            this.userParams.list = res.data.list ?? [];
            this.autoScroll("userinfo");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看更多用户信息
    onMoreUserInfo() {
      this.$emit("openMoreUser");
    },
  },
};
</script>

<style scoped lang="scss">
.elec-safety-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .data-scan {
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .content {
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 0.13rem;
      z-index: 100;

      .col1,
      .col3,
      .col4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item {
          display: flex;
          justify-content: center;
          > span {
            color: #fff;
            text-align: center;
            font-family: "YouSheBiaoTiHei";
            font-size: 0.24rem;
            font-style: normal;
            font-weight: 400;
          }
        }
      }

      .col1 .text,
      .col3 .text .col4 .text {
        position: relative;
        text-align: center;
        padding: 0.2vh 0.4vw;
      }

      .col1 {
        width: 28%;
        height: 70%;
        margin: auto;
        .item {
          width: 4.5vw;
          height: 9vh;
          background: url("@/assets/image/icon1.png") no-repeat;
          background-size: 100% 100%;
          > span {
            text-shadow: 0px 2.791px 5.582px #fb0;
            font-size: 0.24rem;
          }
        }
        .text {
          margin-top: 1.2vh;
          background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0%,
            #4e3b01 46.97%,
            rgba(0, 0, 0, 0) 96.9%
          );
        }
      }

      .col2 {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        .col3 {
          width: 100%;
          height: 45%;
          .item {
            width: 4vw;
            height: 8vh;
            background: url("@/assets/image/icon2.png") no-repeat;
            background-size: 100% 100%;
            > span {
              text-shadow: 0px 2.791px 5.582px #06f;
              font-size: 0.14rem;
            }
          }
          .text {
            margin-top: 0.8vh;
            background: linear-gradient(
              90deg,
              #000 0%,
              #01434e 46.97%,
              #000 96.9%
            );
            font-size: 0.1rem;
          }
        }
        .col4 {
          width: 100%;
          height: 55%;
          .item {
            width: 5.5vw;
            height: 10vh;
            background: url("@/assets/image/icon2.png") no-repeat;
            background-size: 100% 100%;
            > span {
              text-shadow: 0px 2.791px 5.582px #06f;
              font-size: 0.24rem;
            }
          }
          .text {
            margin-top: 1.2vh;
            background: linear-gradient(
              90deg,
              #000 0%,
              #01434e 46.97%,
              #000 96.9%
            );
          }
        }
      }
    }
    .circle {
      bottom: 23%;
    }
  }
  .user-info {
    width: 100%;
    height: 32%;
    position: relative;
    .more {
      position: absolute;
      right: 1vw;
      top: 0.3vh;
      color: #0ff;
      font-family: "YouSheBiaoTiHei";
      font-size: 0.18rem;
      cursor: pointer;
    }
    .content {
      height: calc(100% - 0px);
    }
  }

  .alarm-info {
    width: 100%;
    height: 32%;
    .content {
      height: calc(100% - 0px);
    }
  }
}
</style>
